<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <!-- 引入自己的样式 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/css/login.css">

    <script src="${pageContext.request.contextPath}/style/js/jquery-3.5.1.js"></script>

    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="../ficon.ico">

    <style>
        .yanzheng {
            style:"display: inline-block";
            height: 30px;
            position: relative;

        }
        .yanzheng img {
            margin-top: 10px;
            position: absolute;
            left: 10px;
        }
        .auth_content_item .yanzheng input {
            width: 110px;
            height: 30px;
            margin-top: 0px;
            position: absolute;
            left: 120px;
            top: 10px;

        }
    </style>

</head>

<body class="text-center">
<div class="login_tit">
    <p class="login_tit1">高校就业大数据管理系统</p>
    <p class="login_tit2"> ------身 份 认 证</p>
</div>

<div class="login">
    <p>账号登录</p>
    <div class="auth_content">
        <div class="auth_content_item">

            <form class="form-signin">
                <p class="auth_icon">
                    <label for="username" class="sr-only"></label>
                    <input id="username" name="username" class="form-control" type="text" placeholder="用户名" required autofocus>
                    <span id="usernameError" style="display: none;" class="auth_error">请输入正确的手机号</span>
                </p>
                <p class="auth_icon">

                    <label for="password" class="sr-only"></label>
                    <input id="password" name="password" class="form-control" type="password" placeholder="密码" required>
                    <span id="passwordError" style="display: none;" class="auth_error">包含大小写字母数字且长度为8-20</span>

                </p>
                <p class="auth_icon yanzheng" >
                    <img width="100px" height="30px"  src="http://localhost:8080/getimg" id="images" onclick="replaceImg()">
                    <input type="text" id="input"  class="form-control" placeholder="请输入验证码" name="input" required="true"></br>
                </p>
<%--                <p>--%>
<%--                    <input id="remeberme" name="remeberme" type="checkbox">--%>
<%--                    <label style="font-size: 10px; color:rgb(125, 123, 123)">一周内免登录</label>--%>
<%--                </p>--%>
                <p>
<%--                    需要出发俩个函数，可以在一个函数里面包含另一个函数--%>
                    <button onclick="doYanzheng()" type="button" class="auth_login_btn" id="auth_login_btn" >登 录</button>
                </p>
                <label>
                    <a href="register.jsp" style="text-decoration: none; "><small>点我注册</small></a>
                </label>

            </form>
        </div>
    </div>
</div>

</body>

</html>

<script>
    var scuOrfai = false ;

    <%--    验证码验证--%>
    function replaceImg(){
        let x = document.getElementById("images").src="http://localhost:8080/getimg";
    };
     function doYanzheng() {

        var data=$("#input").val();
         console.log("验证码")

         console.log("data",data);
        if (data==''){
            alert("请输入验证码");
        }else{
            $.ajax(
                {
                    type:"get",
                    url:"http://localhost:8080/login", //不能直接url:"login"，这样得到的是http://localhost:8080/jsp/admin/login?code=验证码
                    data:"code="+data, //get请求的params参数
                    async:false,  //使用ajax同步提交数据
                    success:function (response) {
                        if (response==false){
                            scuOrfai = false;
                            alert("验证码不正确");
                            replaceImg(); //刷新验证码
                        }else  if (response==true){
                            // alert("登录成功,,,1秒后跳转到系统主页");
                            scuOrfai = true;
                            doLogin();  //这里函数里面可以放一个一个函数
                        }else{
                            alert("登录失败，请联系管理员....");
                        }
                    }
                }
            );
        }

        return scuOrfai;
    }


    function doLogin() {

        var name=$("#username").val();
        var password=$("#password").val();
        console.log("登录")


        if (name==''|| password==''){
            alert("请输入账号和密码");
        }else if(scuOrfai == false){
            alert("验证码不正确");
        }
        else{
            $.ajax(
                {
                    type:"post",
                    url:"/admin/doLogin",
                    data:{
                        name:name,
                        pwd:password
                    },
                    async:false,  //使用ajax同步提交数据
                    success:function (response) {
                        if (response=="error"){
                            alert("登录失败");
                        }else  if (response=="ok"){
                            // alert("登录成功,,,1秒后跳转到系统主页");
                            setTimeout(window.location.href="/admin/main",1000);
                        }else{
                            alert("登录失败，请联系管理员....");
                        }
                    }
                }
            );
        }
    }
</script>
